﻿@{ViewBag.ApiUrl = "/api/shoutboxapi";}
<section class="articlemain">
    @{if (User.IsInRole("RoleMember") || User.IsInRole("RoleFans") || User.IsInRole("RoleBaffMember") || User.IsInRole("RoleAdminShoutBox"))
      {
        <h3>
            @Html.ActionLink(CloudFranceTriple.WebRole.Properties.Resources.ShoutBoxTitle, "Index", "ShoutBox", new { area = "Portail" }, null)
        </h3>
        <br />
      }
      else
      {
        <h3>
            @CloudFranceTriple.WebRole.Properties.Resources.ShoutBoxTitle
        </h3>
        <br />
      }
    }
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript" src="@Url.Content("http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js")"></script>
    <script type="text/javascript">
        function ShoutBoxViewModel() {
            var self = this;
            self.shoutboxsets = ko.observableArray();

            var baseUri = '@ViewBag.ApiUrl';
            self.create = function (formElement) {
                $(formElement).validate();
                if ($(formElement).valid()) {
                    $.post(baseUri, $(formElement).serialize(), null, "json")
                        .done(function (msg) {
                            $('#MessageShoutBox').val("");
                            $.getJSON(baseUri, self.shoutboxsets);
                        });
                }
            }
            $.getJSON(baseUri, self.shoutboxsets);
        }
        $(document).ready(function () {
            ko.applyBindings(new ShoutBoxViewModel());
        })
    </script>
    <marquee id="shoutboxmarquee" direction="UP" behavior="scroll" scrollamount="1" scrolldelay="50" height="300">
        <ul id="shoutboxmessages" data-bind="foreach: shoutboxsets" style="padding: 0 0 0 4px;margin:0;list-style-type:none;">
            <li>
                <div class="editor-label" style="width: 626px; word-wrap: break-word;">
                    <span data-bind="text: $data.MessageShoutBox"></span>
                </div>
                <div class="editor-field">
                    <span data-bind="text: $data.UserNameAuthorShoutBox"></span> - <span data-bind="text: $data.CreationDateShoutBox"></span>
@*                     <a data-bind="attr: { href: '/portail/shoutbox/edit/' + $data.Id }" >@CloudFranceTriple.WebRole.Properties.Resources.ButtonEdit</a>
                     <a data-bind="attr: { href: '/portail/shoutbox/delete/' + $data.Id }">@CloudFranceTriple.WebRole.Properties.Resources.ButtonDelete</a>*@
                    <br />
                    <br />
                </div>
            </li>
        </ul>
    </marquee>
    @{if (User.IsInRole("RoleMember") || User.IsInRole("RoleFans") || User.IsInRole("RoleBaffMember") || User.IsInRole("RoleAdminShoutBox"))
      {        
        <form id="ShoutBoxSetAdd" data-bind="submit: create">
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <fieldset>
                <legend>ShoutBoxSet</legend>

                <div class="editor-label">
                    @CloudFranceTriple.WebRole.Properties.Resources.ShoutBoxMessageAddLabel
                </div>
                <div class="editor-field" style="width: 400px;">
                    @Html.TextBox("MessageShoutBox")
                    @Html.ValidationMessage("MessageShoutBox")
                    <input type="submit" value="@CloudFranceTriple.WebRole.Properties.Resources.ShoutBoxCreateButton" />
                </div>
            </fieldset>
        </form>
      }
    }
</section>
